<template>
	<div class="page">
		<div class="header">
			<img src="../public/标题.png" alt="MDONG梦动" />
		</div>
		<div class="content">
			<div class="left">
				<img src="../左背景.png" alt="背景图" />
			</div>
			<div class="right">
				<div class="avatar"></div>
				<el-input placeholder="用户名"></el-input>
				<el-input type="password" placeholder="密码"></el-input>
				<el-checkbox>保持会话</el-checkbox>
				<el-button type="primary" class="login-button">登录</el-button>
			</div>
		</div>
		<div class="fotter">
			<div class="wave"></div>
			<div class="wave wave-2"></div>
		</div>
	</div>
</template>

<script setup>
	// const login = () => {
	// 	const username = ref('');
	// 	const password = ref('');
	// 	if (username.value === '' || password.value === '') {
	// 		alert('用户名和密码不能为空');
	// 		return;
	// 	}
	// 	// 调用后端接口进行登录
	// 	console.log('登录成功');
	// };
</script>

<style>
	body {
		margin: 0;
		font-family: Arial, sans-serif;
		background-color: #f5f5f5;
	}

	.page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
		box-shadow: 0 10px 20px rgba(255, 102, 0, 0.3);
		/* 修改为橙色阴影 */
		border-radius: 16px;
		overflow: hidden;
		background-image: url(../public/整页背景bg.png);
	}

	.header {
		text-align: center;
		margin-bottom: 24px;
	}

	.header img {
		width: 100%;
	}

	.header h1 {
		font-size: 24px;
		color: #333;
		margin: 8px 0 0;
	}

	.content {
		display: flex;
		width: 100%;
		max-width: 800px;
	}

	.left {
		flex: 1;
		background-color: #ffaaff;
		border-radius: 16px 0 0 16px;
		overflow: hidden;
	}

	.left img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.right {
		flex: 1;
		padding: 40px;
		background-color: white;
		text-align: center;
		border-radius: 0 16px 16px 0;
	}

	.avatar {
		width: 80px;
		height: 80px;
		background-color: #eee;
		border-radius: 50%;
		margin: 0 auto 24px;
	}

	.el-input,
	.el-checkbox,
	.login-button {
		width: 100%;
		margin-bottom: 16px;
	}

	.login-button {
		background-color: #ff6600;
		color: white;
		border: none;
		padding: 12px;
		border-radius: 5px;
		cursor: pointer;
	}

	.login-button:hover {
		background-color: #e65c00;
	}

	.fotter {
		width: 100%;
		height: 251px;
		position: absolute;
		bottom: 0;
		overflow: hidden;
	}

	/* 添加波动效果的关键帧动画 */
	@keyframes wave {

		0%,
		100% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(-50%);
		}
	}

	@keyframes wave-2 {

		0%,
		100% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(-100%);
		}
	}

	/* 应用波动效果的元素 */
	.wave,
	.wave-2 {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200%;
		/* 使背景图宽度为容器宽度的两倍 */
		height: 100%;
		background: url(../public/流动效果.png) repeat-x;
		background-size: 50% 100%;
		transform-origin: center bottom;
	}

	.wave {
		animation: wave 40s linear infinite;
		/* 减慢流动速度 */
	}

	.wave-2 {
		opacity: 0.5;
		animation: wave-2 30s linear infinite;
		/* 减慢流动速度 */
	}
</style>